<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>狂欢司庆 玩赚世界杯</title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta content="true" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.0.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css?v=1" />

		<script>
			function set_meta() {
				var body_width = document.documentElement.clientWidth;
				//var body_height = document.documentElement.clientHeight;
				var get_scale = (body_width) / 750;

				var get_content = "width=device-width, initial-scale=" + get_scale + ", minimum-scale=" + get_scale + ", maximum-scale=" + get_scale + ", user-scalable=no";
				document.getElementById("viewport").setAttribute('content', get_content);

			}
			set_meta();
		</script>
		<style>
			.swiper-container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div>
			<!-- Swiper -->

		</div>
		<div class="gamebox">
			<!--footer-->
			<img src="img/img7.jpg" class="footer" />
			<div class="canvas">
				<!--背景-->
				<div class="background background1" data-id='1'></div>
				<div class="skin skin1" data-id='1'></div>
				<div class="hair hair1" data-id='1'></div>
				<div class="clothes clothes1" data-id='1'></div>
				<div class="trousers trousers1" data-id='1'></div>
				<div class="socks"></div>
				<div class="shoes"></div>
				<div class="num">1</div>
				<div class="prop"></div>
				<!--发型-->
				<!--<img src="" class="hair" />-->

				<!--身体-->
				<!--<img src="" class="me" />-->

			</div>
			<div class="menu">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'><i class="icon1 icon"></i>
								<p>发型</p>
							</a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'><i class="icon2 icon"></i>
								<p>皮肤</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'><i class="icon3 icon"></i>
								<p>衣服</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'><i class="icon4 icon"></i>
								<p>裤子</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'><i class="icon5 icon"></i>
								<p>号码</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'><i class="icon6 icon"></i>
								<p>鞋子</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'><i class="icon7 icon"></i>
								<p>配饰</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'><i class="icon8 icon"></i>
								<p>袜子</p>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'><i class="icon9 icon"></i>
								<p>背景</p>
							</a>
						</div>

					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu1">
				<a href="javascript:;" class="menuBtn"><img src="img/icon1.png" />
					<p>发型</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu2">
				<a href="javascript:;" class="menuBtn"><img src="img/icon2.png" />
					<p>皮肤</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu3">
				<a href="javascript:;" class="menuBtn"><img src="img/icon3.png" />
					<p>衣服</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu4">
				<a href="javascript:;" class="menuBtn"><img src="img/icon4.png" />
					<p>裤子</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu5">
				<a href="javascript:;" class="menuBtn"><img src="img/icon5.png" />
					<p>号码</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'>1</a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'>2</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'>3</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'>4</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'>5</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'>6</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'>7</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'>8</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'>9</a>
						</div><div class="swiper-slide">
							<a href="javascript:;" data-id='10'>10</a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu6">
				<a href="javascript:;" class="menuBtn"><img src="img/icon6.png" />
					<p>鞋子</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu7">
				<a href="javascript:;" class="menuBtn"><img src="img/icon7.png" />
					<p>配饰</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='11'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='12'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='13'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='14'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='15'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='16'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='17'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='18'></a>
						</div>
						<!--<div class="swiper-slide">
							<a href="javascript:;" data-id='19'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='20'></a>
						</div>-->
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu8">
				<a href="javascript:;" class="menuBtn"><img src="img/icon8.png" />
					<p>袜子</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="submenu submenu9">
				<a href="javascript:;" class="menuBtn"><img src="img/icon9.png" />
					<p>背景</p>
				</a>
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;" data-id='1'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='2'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='3'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='4'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='5'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='6'></a>
						</div>

						<div class="swiper-slide">
							<a href="javascript:;" data-id='7'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='8'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='9'></a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;" data-id='10'></a>
						</div>
					</div>

				</div>

				<div class="arrow"></div>
			</div>
			<div class="name">
				<img src="#" class="headimgurl" />
				<span class="nickname"></span>
			</div>
			<!--按钮-->
			<div class="btnbox">
				<a href="javascript:;" class="saveBtn"><img src="img/img36.png" /><span>速抢优惠券</span></a>
				<a href="javascript:;" class="shareBtn"><img src="img/img37.png" /><span>分享赢吉祥物</span></a>
			</div>
		</div>
		<!--弹出框-->
		<div class="win win1">
			<div class="wincont1">
				<a href="javascript:;" class="close"><img src="img/close.png" /></a>
				<div class="coupons flex flex-align-top">
					<img src="img/img34.png" />
					<div class="flex-1 ml20">
						<p class="name">蒙牛常温奶</p>
						<!--<p>满<span class="max_num"></span>元可用</p>-->
						<p class="t"></p>
					</div>
					<div class="price">￥<span class="coupon_fee">10</span></div>
				</div>
			</div>
		</div>
		<div class="win win2">
			<div class="wincont2">
				<a href="javascript:;" class="close"><img src="img/close.png" /></a>
				<div class="coupons flex flex-align-top">
					<img src="img/entity.png" />
					<div class="flex-1 ml20">
						<p class="name">世界杯吉祥物一个</p>
						<a href="address.html" class="filladdrBtn">填写收货地址</a>
					</div>

				</div>
			</div>
		</div>
		<div class="win win3">
			<div class="wincont3">
				<a href="javascript:;" class="close"><img src="img/close.png" /></a>

			</div>
		</div>
		<!--分享-->
		<div class="share">
			<img src="img/share.png" />
		</div>
		<div class="page-loading" id="loadingToast">
			<div class="ball-scale-multiple">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--加载-->
		<div class="loadbarpage">
			<div>
				<p>50%</p>
				<div class="loadbarbg">
					<div class="loadbar"></div>
				</div>

			</div>
		</div>
	</body>

</html>
<script src="js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.eraser.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js?v=16" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var preloadimg = function(arr, comp) {

		var n = 0;
		var loadImg = function(src) {
			var img = new Image();
			img.onload = function() {
				n++;
				var t = Math.round(n / l * 100);
				$(".loadbarpage p").html(t + "%");
				$(".loadbarpage .loadbar").css("width", t + "%");

				if(n == l) {
					comp();
				}
			}
			img.src = src;
		}
		if(typeof(arr) == "string") {
			var l = 1;
			var w = new loadImg(arr);
		} else {
			var l = arr.length;
			for(var i = 0; i < l; i++) {
				var w = new loadImg("img/" + arr[i]);
			}
		}
	}

	$(function() {
		var list = [
			'background/1.jpg',
			'background/2.jpg',
			'background/3.jpg',
			'background/4.jpg',
			'background/5.jpg',
			'background/6.jpg', 
			'background/7.jpg',
			'background/8.jpg',
			'background/9.jpg',
			'background/10.jpg',
			'clothes/1/1.png',
			'clothes/1/2.png',
			'clothes/1/3.png',
			'clothes/1/4.png',
			'clothes/1/5.png',
			'clothes/1/6.png',
			'clothes/1/7.png',
			'clothes/1/8.png',
			'clothes/1/9.png',
			'clothes/1/10.png',
			'clothes/2/1.png',
			'clothes/2/2.png',
			'clothes/2/3.png',
			'clothes/2/4.png',
			'clothes/2/5.png',
			'clothes/2/6.png',
			'clothes/2/7.png',
			'clothes/2/8.png',
			'clothes/2/9.png',
			'clothes/2/10.png',
			'hair/1/1.png',
			'hair/1/2.png',
			'hair/1/3.png',
			'hair/1/4.png',
			'hair/1/5.png',
			'hair/1/6.png',
			'hair/1/7.png',
			'hair/1/8.png',
			'hair/1/9.png',
			'hair/1/10.png',
			'hair/2/1.png',
			'hair/2/2.png',
			'hair/2/3.png',
			'hair/2/4.png',
			'hair/2/5.png',
			'hair/2/6.png',
			'hair/2/7.png',
			'hair/2/8.png',
			'hair/2/9.png',
			'hair/2/10.png',
			'shoes/1/1.png',
			'shoes/1/2.png',
			'shoes/1/3.png',
			'shoes/1/4.png',
			'shoes/1/5.png',
			'shoes/1/6.png',
			'shoes/1/7.png',
			'shoes/1/8.png',
			'shoes/1/9.png',
			'shoes/1/10.png',
			'shoes/2/1.png',
			'shoes/2/2.png',
			'shoes/2/3.png',
			'shoes/2/4.png',
			'shoes/2/5.png',
			'shoes/2/6.png',
			'shoes/2/7.png',
			'shoes/2/8.png',
			'shoes/2/9.png',
			'shoes/2/10.png',
			'skin/1/1.png',
			'skin/1/2.png',
			'skin/1/3.png',
			'skin/1/4.png',
			'skin/1/5.png',
			'skin/2/1.png',
			'skin/2/2.png',
			'skin/2/3.png',
			'skin/2/4.png',
			'skin/2/5.png',
			'trousers/1/1.png',
			'trousers/1/2.png',
			'trousers/1/3.png',
			'trousers/1/4.png',
			'trousers/1/5.png',
			'trousers/1/6.png',
			'trousers/1/7.png',
			'trousers/1/8.png',
			'trousers/1/9.png',
			'trousers/1/10.png',
			'trousers/2/1.png',
			'trousers/2/2.png',
			'trousers/2/3.png',
			'trousers/2/4.png',
			'trousers/2/5.png',
			'trousers/2/6.png',
			'trousers/2/7.png',
			'trousers/2/8.png',
			'trousers/2/9.png',
			'trousers/2/10.png',
			'socks/1/1.png',
			'socks/1/2.png',
			'socks/1/3.png',
			'socks/1/4.png',
			'socks/1/5.png',
			'socks/1/6.png', 
			'socks/1/7.png',
			'socks/1/8.png',
			'socks/1/9.png',
			'socks/1/10.png',
			'socks/2/1.png',
			'socks/2/2.png',
			'socks/2/3.png',
			'socks/2/4.png',
			'socks/2/5.png',
			'socks/2/6.png', 
			'socks/2/7.png',
			'socks/2/8.png',
			'socks/2/9.png',
			'socks/2/10.png',
			'menu/background/1.png',
			'menu/background/2.png',
			'menu/background/3.png',
			'menu/background/4.png',
			'menu/background/5.png',
			'menu/background/6.png', 
			'menu/background/7.png',
			'menu/background/8.png',
			'menu/background/9.png',
			'menu/background/10.png',
			'menu/shoes/1/1.png',
			'menu/shoes/1/2.png',
			'menu/shoes/1/3.png',
			'menu/shoes/1/4.png',
			'menu/shoes/1/5.png',
			'menu/shoes/1/6.png',
			'menu/shoes/1/7.png',
			'menu/shoes/1/8.png',
			'menu/shoes/1/9.png',
			'menu/shoes/1/10.png',
			'menu/shoes/2/1.png',
			'menu/shoes/2/2.png',
			'menu/shoes/2/3.png',
			'menu/shoes/2/4.png',
			'menu/shoes/2/5.png',
			'menu/shoes/2/6.png',
			'menu/shoes/2/7.png',
			'menu/shoes/2/8.png',
			'menu/shoes/2/9.png',
			'menu/shoes/2/10.png',
			'menu/head/1/1.png',
			'menu/head/1/2.png',
			'menu/head/1/3.png',
			'menu/head/1/4.png',
			'menu/head/1/5.png',
			'menu/head/1/6.png',
			'menu/head/1/7.png',
			'menu/head/1/8.png',
			'menu/head/1/9.png',
			'menu/head/1/10.png',
			'menu/head/2/1.png',
			'menu/head/2/2.png',
			'menu/head/2/3.png',
			'menu/head/2/4.png',
			'menu/head/2/5.png',
			'menu/head/2/6.png',
			'menu/head/2/7.png',
			'menu/head/2/8.png',
			'menu/head/2/9.png',
			'menu/head/2/10.png',
			'prop/1.png',
			'prop/2.png',
			'prop/3.png',
			'prop/4.png',
			'prop/5.png',
			'prop/6.png', 
			'prop/7.png',
			'prop/8.png',
			'prop/9.png',
			'prop/10.png',
			'prop/11.png',
			'prop/12.png',
			'prop/13.png',
			'prop/14.png',
			'prop/15.png',
			'prop/16.png', 
			'prop/17.png',
			'prop/2/2.png',
			'prop/2/3.png',
			'prop/2/18.png',
			'win1.png',
			'win2.png',
			'win3.png',
			'icon1.png',
			'icon2.png',
			'icon3.png',
			'icon4.png',
			'icon5.png',
			'icon6.png',
			'icon7.png',
			'icon8.png',
			'icon9.png',
			
		]
		preloadimg(list, function() {
			 	$(".loadbarpage").hide();
		});

	});
</script>
<script>
	var type = 2; //新增
	var swiper = new Swiper('.menu .swiper-container', {
		direction: 'vertical',
		slidesPerView: 6,
		spaceBetween: 5,

	});
	var swiper1 = new Swiper('.gamebox .submenu1 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper2 = new Swiper('.gamebox .submenu2 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper3 = new Swiper('.gamebox .submenu3 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper4 = new Swiper('.gamebox .submenu4 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper5 = new Swiper('.gamebox .submenu5 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper6 = new Swiper('.gamebox .submenu6 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper7 = new Swiper('.gamebox .submenu7 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper8 = new Swiper('.gamebox .submenu8 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	var swiper9 = new Swiper('.gamebox .submenu9 .swiper-container', {
		direction: 'vertical',
		slidesPerView: 5,
		spaceBetween: 5,

	});
	/*
	查询用户世界杯人物形象
	openid	   string	是	用户openid
	activeid   string	是	活动编号
	sign	  string	是	签名,详见备注
*/
	function queryHrActiveUser(openid) {
		var sign = md5("activeid=" + activeid + "&openid=" + openid + "&key=" + HR_KEY).toUpperCase();
		var param = {
			openid,
			activeid,
			sign
		}
		$.ajax({
			url: PATH + 'WechatMsg/hractive/queryHrActiveUser',
			type: "get",
			dataType: "json",
			data: param,
			success: function(data) {
				//console.log(data);
				if(data.code == '200' && data.data.length > 0) {
					type = 1;
					var data = data.data[0];
					/*性别*/
					if(data.sex) {
						var sex = data.sex == '1' ? 'boy' : 'girl';
						$('.canvas').attr('class', 'canvas ' + sex);
					}

					/*皮肤*/
					if(data.skin) {
						$('.canvas .skin').attr('class', 'skin skin' + data.skin).attr('data-id', data.skin);
					}
					/*衣服*/
					if(data.clothes) {
						$('.canvas .clothes').attr('class', 'clothes clothes' + data.clothes).attr('data-id', data.clothes);

					}
					/*裤子*/
					if(data.trousers) {
						$('.canvas .trousers').attr('class', 'trousers trousers' + data.trousers).attr('data-id', data.trousers);

					}
					/*鞋子*/
					if(data.shoes) {
						$('.canvas .shoes').attr('class', 'shoes shoes' + data.shoes).attr('data-id', data.shoes);

					}
					/*袜子*/
					if(data.socks) {
						$('.canvas .socks').attr('class', 'socks socks' + data.socks).attr('data-id', data.socks);

					}
					/*配饰*/
					if(data.prop) {
						$('.canvas .prop').attr('class', 'prop prop' + data.prop).attr('data-id', data.prop);

					}
					/*背景*/
					if(data.background) {
						$('.canvas .background').attr('class', 'background background' + data.background).attr('data-id', data.background);

					}
					/*发型*/
					if(data.head) {
						$('.canvas .hair').attr('class', 'hair hair' + data.head).attr('data-id', data.head);

					}
					/*号码*/
					if(data.num) {
						$('.canvas .num').html(data.num)

					}
				} else {

				}
			},
			error: function(err) {
				console.log(err);
			}
		});
	}

	$(function() {
		/*获取性别*/
		var mysex = getQueryString('sex');
		$('.gamebox').addClass(mysex);
		_getOpenid(function(res) {
			/*获取用户信息*/
			getWxUserMsg(res);

			/*分享*/
			getWxJsApi(true);
			/*查询用户形象*/
			queryHrActiveUser(Openid);
		})
		$('.submenu').css({
			'opacity': '1',
			'display': 'none'
		});
		$('.menu a').click(function() {
			var num = parseInt($(this).attr('data-id'));
			if(num && num > 0) {
				$('.submenu').eq(num - 1).show();
				//swiper2.update()

				$('.menu').hide();
			}

		});
		$('.submenu .menuBtn').click(function() {
			$('.menu').show();
			$('.submenu').hide()
		});
		/*选择了发型*/
		$('.submenu1 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .hair').attr('class', 'hair hair' + index).attr('data-id', index)

		});
		/*切换皮肤*/
		$('.submenu2 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .skin').attr('class', 'skin skin' + index).attr('data-id', index)
		});
		/*切换衣服*/
		$('.submenu3 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .clothes').attr('class', 'clothes clothes' + index).attr('data-id', index)
		});
		/*切换裤子*/
		$('.submenu4 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .trousers').attr('class', 'trousers trousers' + index).attr('data-id', index)
		});
		/*切换鞋子*/
		$('.submenu6 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .shoes').attr('class', 'shoes shoes' + index).attr('data-id', index)
		});
		/*切换袜子*/
		$('.submenu8 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .socks').attr('class', 'socks socks' + index).attr('data-id', index)
		});
		/*切换背景*/
		$('.submenu9 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');
			$('.canvas .background').attr({
				'class': 'background background' + index
			});
			$('.canvas .background').attr('data-id', index)
		});
		/*切换号码*/
		$('.submenu5 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');

			$('.canvas .num').text(index);
		});
		/*切换配饰*/
		$('.submenu7 .swiper-slide a').click(function() {
			var index = $(this).attr('data-id');

			$('.canvas .prop').attr('class', 'prop prop' + index).attr('data-id', index)
		});
		/*点击分享*/
		$('.btnbox .shareBtn').click(function() {
			$('.share').show();

		});
		/*关闭分享弹出框*/
		$('.share').click(function() {
			$('.share').hide();
		});
		/*关闭获奖框*/
		$('.win .close').click(function() {
				$(this).closest('.win').hide();
			})
			/*点击保存*/
		$('.btnbox .saveBtn').click(function() {
			var skin = $('.canvas .skin').attr('data-id');
			var head = $('.canvas .hair').attr('data-id');
			var socks = $('.canvas .socks').attr('data-id');
			var background = $('.canvas .background').attr('data-id');
			var num = $('.canvas .num').text();
			var clothes = $('.canvas .clothes').attr('data-id');
			var trousers = $('.canvas .trousers').attr('data-id');
			var shoes = $('.canvas .shoes').attr('data-id');
			var prop = $('.canvas .prop').attr('data-id');
			/*if(!skin || !head || !socks || !background || !num || !clothes || !trousers || !shoes || !prop) {
				showMessage('请设计好完整形象再提交');
				return false;
			};*/
			var sex = $('.gamebox').hasClass('boy') ? '1' : '2';
			var name = $('.name .nickname').text();
			hrActiveUserDesign(Openid, activeid, name, sex, head, socks, background, skin, num, clothes, trousers, shoes, prop, type)
		})
	});
</script>